<template>
  <el-dialog
    v-model="visible"
    title="授权代表公司维护"
    width="1200"
    draggable
    @close="close"
    :z-index="2000"
  >
    <el-button class="mb-2" type="primary" @click="handleOpen()"
      >新增授权代表公司</el-button
    >
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      :header-cell-style="{
        color: '#333333',
        background: '#F6FAFF',
      }"
    >
      <el-table-column
        prop="importer_company_name"
        label="授权代表公司名称"
        width="140"
      />
      <el-table-column prop="type_text" label="类别" />
      <el-table-column prop="address" label="州省/城市/区" width="140">
        <template #default="{ row }">
          <div>{{ row.province }} {{ row.city }} {{ row.area }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="详细地址" width="140" />
      <el-table-column prop="email" label="电子邮件" width="180" />
      <el-table-column prop="telephone" label="联系电话" width="140" />
      <el-table-column prop="applied_company" label="申请公司" width="110" />
      <el-table-column prop="issuance_time" label="下证日期" width="180" />
      <el-table-column prop="service_period" label="服务周期" width="180">
        <template #default="{ row }">
          <div>{{ row.service_period_start }}</div>
          <div>{{ row.service_period_end }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="is_print_telephone" label="是否打印电话号码" width="110">
        <template #default="{ row }">
          {{ row.is_print_telephone == 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="address" fixed="right" label="操作" width="110">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleOpen(row.id)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <!-- <el-button type="primary" :loading="loading" @click="save(formRef)">保 存</el-button> -->
    </template>
  </el-dialog>
  <importerForm ref="importerFormRef" @query="getList"></importerForm>
</template>
<script setup name="ComModal">
import { queryImporterList, deleteImporter } from "../../api";
import { reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import importerForm from "./form";

import useCommonStore from "@/store/modules/common";
const commonStore = useCommonStore();
const tableData = computed(() => {
  if (!commonStore.importerOptions) {
    commonStore.getImporterList();
  }
  return commonStore.importerOptions || [];
});

const emits = defineEmits(["query"]);
const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
});

const data = reactive({
  visible: false,
  loading: false,
  // tableData: []
});
const { visible, loading } = toRefs(data);
const open = (id) => {
  visible.value = true;
  // getList()
};
const getList = async () => {
  commonStore.getImporterList();
  //   try {
  //     const res = await queryImporterList()
  //     tableData.value = res.data
  //   } catch (e) {
  //     throw Error(e)
  //   }
};

const importerFormRef = ref();
const handleOpen = async (id) => {
  importerFormRef.value.open(id);
};

const handleDelete = async (id) => {
  ElMessageBox.confirm("是否删除当前授权代表公司?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(async () => {
      try {
        const res = await deleteImporter({
          id,
        });
        ElMessage.success("删除成功");
        commonStore.getImporterList();
      } catch (e) {
        throw Error(e);
      }
    })
    .catch(() => {});
};

const close = () => {
  // emits('query')
  visible.value = false;
};
defineExpose({ open });
</script>
